<template>
  <div class="join">
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal"/>
    <div class="join_bg" :style="{backgroundImage: joinBg}" @click="handleNavigate">
      <img src="../images/join_us_btn.png" alt="">
    </div>
    <div class="environment">
      <div class="title">
        <p id="anchor-1">办公环境</p>
        <p class="common_p">OFFICE</p>
      </div>
      <swiper loop auto height="3.74rem" :duration="800" style="padding:0 .28rem" dots-position="center">
        <swiper-item  class="swiper-demo-img" v-for="(item, index) in swiperList" :key="index">
          <a @click="preview(item.img)" :href="item.url?item.url:'#'" style="display:block;height:3.74rem;width:100%;backgroundSize:100%" :style="{backgroundImage: 'url(' +item.img+ ')'}"></a>
        </swiper-item>
      </swiper>
    </div>
    <div class="culture_title" id="anchor-2">
      <p>文化生活</p>
      <p class="common_p">STAFF ACTIVITY</p>
    </div>
    <ul class="culture_list flex-box-container">
      <li v-for="(item, index) in cultureList">
        <div :style="{backgroundImage: 'url('+'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.cover_image+')'}"></div>
        <p class="title">{{item.title}}</p>
        <p class="desc">{{item.desc}}</p>
      </li>
    </ul>

    <BottomInfo />
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
  import { SwiperItem, Swiper } from 'vux'
  import BottomInfo from "./common/bottomInfo";
  import QxHead from "./common/qxHead";
  import Menu from "./common/menu";

  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js"),
      wsService = require("../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      SwiperItem,
      Swiper,
      BottomInfo,
      QxHead,
      Menu
    },
    data() {
      return {
        showModalFlag: false,
        joinBg: 'url('+require('../images/join_us.png')+')',
        cultureList: [],
        swiperList: []
      }
    },
    mounted() {
      this.getActivityList()
      this.getSliderList()
        setTimeout( () => {
            this.getLocal()
        }, 200)
    },
    methods: {
        getLocal() {
            let select = localStorage.getItem("id")
            if (select) {
                document.querySelector(select).scrollIntoView()
            }
        },
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      getActivityList() {
        let url = CONSTANT.URL.getActivityList;
        common.requestGetAjax(url, {}, {}, (res) => {
          if (res.code == 200) {
            this.cultureList = res.data
          }
        })
      },
      getSliderList() {
        let url = CONSTANT.URL.getSliderList;
        common.requestGetAjax(url, {}, {page: '/join.html'}, (res) => {
          if (res.code == 200) {
            res.data.map( item => {
              this.swiperList.push({
                url: 'javascript:',
                img: 'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.image,
                title: "1333"
              })
            })
          }
        })
      },
      handleNavigate() {
        location.href = 'https://jobs.51job.com/all/co4910180.html'
      },
      preview(img) {
          let arr = []
          this.swiperList.map( item => {
              arr.push(item.img)
          })
          wsService.default.previewImage(img, arr);
      },
    }
  };
</script>
<style lang="less">
  .join {
    /*padding-bottom: 1.31rem;*/
    .join_bg {
      /*margin-bottom: .51rem;*/
      width: 100%;
      height: 3.14rem;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      text-align: center;
      img {
        width: 1.7rem;
        vertical-align: middle;
        margin-top: 1.51rem;
      }
    }

    .environment {
      padding: .75rem 0 .53rem 0;
      background-color:#f2f6fa;
      .title {
        margin-bottom: .6rem;
        text-align: center;
        color: #0154A6;
        font-size: .38rem;
        font-weight: bold;
      }
    }
    .culture_title {
      text-align: center;
      font-size: .38rem;
      color: #2155A0;
      margin: .5rem 0 .41rem 0;
      font-weight: bold;
    }
    .culture_list {
      li {
        width: 3.33rem;
        margin-right: .27rem;
        margin-bottom: .4rem;
        &:nth-child(2n) {
          margin-right: 0;
        }
        &:nth-child(2n-1) {
          margin-left: .28rem;
        }

        div {
          width: 3.33rem;
          height: 2.22rem;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
        .title {
          margin: .28rem 0 .22rem 0;
          font-size: .29rem;
        }
        .desc {
          font-size: .21rem;
          color: #999;
          line-height: .33rem;

        }
      }
    }
  }
</style>

